<template>
  <div>
    <div class="form-body" v-loading="loading">
      <step :step="1"></step>
      <div class="form-title">
        <span>{{ info.name }}</span>
        <span class="form-title-color" v-if="info.type_name">·{{ info.type_name }}</span>
      </div>
      <el-divider content-position="center">填写投保信息</el-divider>
      <!-- <el-button type="primary" size="default" @click="player">录制</el-button>
      <el-button type="primary" size="default" @click="bf">播放</el-button> -->
      <div class="form-window">
        <div class="form-window-line"></div>
        <div class="form-window-txt">保障方案</div>
      </div>
      <div class="form-form">
        <el-form label-position="left" label-width="140px" size="small">
          <el-form-item
            label="方案等级"
            v-if="info.select_list !== undefined && info.select_list.length > 0"
          >
            <el-button
              :disabled="edit"
              size="small"
              @click="selectDjFanan(item.name, index, 6)"
              :class="level == item.name ? 'com-btn' : ''"
              v-for="(item, index) in info.select_list"
              :key="'djf' + index"
              >{{ item.name }}
            </el-button>
          </el-form-item>
          <el-form-item label="保障方案">
            <el-button
              :disabled="edit"
              size="small"
              @click="selectFanan(index)"
              :class="fanan == index ? 'com-btn' : ''"
              v-for="(item, index, key) in chooseDta.fanan"
              :key="'f' + key"
              >{{ index }}
            </el-button>
          </el-form-item>
          <el-form-item label="第三者责任险" v-if="info.is_third">
            <el-button
              :disabled="edit"
              @click="selectIsThird(1)"
              :class="is_third == 1 ? 'com-btn' : ''"
              >投保
            </el-button>
            <el-button
              :disabled="edit"
              @click="selectIsThird(0)"
              :class="is_third == 0 ? 'com-btn' : ''"
              v-show="info.third_true == 0"
              >不投保
            </el-button>
          </el-form-item>
          <el-form-item label="扩展火灾爆炸责任险" v-if="id == 9">
            <el-button
              :disabled="edit"
              @click="selectIsFire(1)"
              :class="is_fire == 1 ? 'com-btn' : ''"
              >投保
            </el-button>
            <el-button
              :disabled="edit"
              @click="selectIsFire(0)"
              :class="is_fire == 0 ? 'com-btn' : ''"
              v-show="info.third_true == 0"
              >不投保
            </el-button>
          </el-form-item>
          <el-form-item label="新机完工责任险" v-if="info.is_finished && is_third == 1">
            <el-button
              :disabled="edit"
              @click="selectIsF(1)"
              :class="is_four == 1 ? 'com-btn' : ''"
              >投保
            </el-button>
            <el-button
              :disabled="edit"
              v-show="info.finished_true == 0"
              @click="selectIsF(0)"
              :class="is_four == 0 ? 'com-btn' : ''"
              >不投保
            </el-button>
          </el-form-item>
          <el-form-item label="扩展24小时意外" v-if="info.id == 4"></el-form-item>
        </el-form>
        <el-card shadow="never" class="fanan-card" v-if="fanan">
          <div class="fanan-card-item">
            <div class="fanan-card-item-left">方案</div>
            <div class="fanan-card-item-right">
              {{ info.type_name }}{{ chooseDta.fanan[fanan].name
              }}<span v-if="is_third">（含第三者责任险）</span>
            </div>
          </div>
          <div class="fanan-card-item" v-if="id == 9">
            <div class="fanan-card-item-left">保费</div>
            <div
              class="fanan-card-item-right"
              v-html="chooseDta.fanan[fanan].price_name"
            ></div>
          </div>
          <div class="fanan-card-item" v-if="id == 9">
            <div class="fanan-card-item-left">事故死亡</div>
            <div
              class="fanan-card-item-right"
              v-html="chooseDta.fanan[fanan].sw_limit"
            ></div>
          </div>

          <div class="fanan-card-item" v-if="id == 9">
            <div class="fanan-card-item-left">医疗费用</div>
            <div
              class="fanan-card-item-right"
              v-html="chooseDta.fanan[fanan].mryl_limit"
            ></div>
          </div>
          <div class="fanan-card-item" v-if="id != 9">
            <div class="fanan-card-item-left">医疗费用</div>
            <div class="fanan-card-item-right">
              {{ chooseDta.fanan[fanan].ylfy.price }}
            </div>
          </div>
          <div class="fanan-card-item" v-if="id != 9">
            <div class="fanan-card-item-left">法律费用</div>
            <div class="fanan-card-item-right">{{ info.flfy }}</div>
          </div>
          <div class="fanan-card-item" v-if="id != 9">
            <div class="fanan-card-item-left">误工费用</div>
            <div class="fanan-card-item-right">{{ info.wgf.price }}</div>
          </div>
          <div class="fanan-card-item" v-if="info.id == 4 && id != 9">
            <div class="fanan-card-item-left">扩展24小时</div>
            <div class="fanan-card-item-right"></div>
          </div>
        </el-card>
        <el-card shadow="never" class="fanan-card" v-if="Third" style="margin-top: 10px">
          <div class="fanan-card-item" style="width: 100%">
            <div class="fanan-card-item-left">第三者责任</div>
            <div class="fanan-card-item-right">
              <span style="line-height: 25px" v-if="info.id == 4 || info.id == 7">
                1、财产损失∶每次事故1000元或损失金额的10%，两者以高者为准。<br />
                2、人伤事故∶无免赔，100%赔付。
              </span>
              <span
                style="line-height: 25px"
                v-if="info.id != 4 && info.id != 7 && info.id != 1"
              >
                <div v-if="info.id == 5">
                  现场三者责任，全年累计限额100万，其中每人每次事故赔偿限额50万，每次财产损失限额10万。<br />
                  1、财产损失∶每次事故500元或损失金额的5%，两者以高者为准。<br />
                  2、人伤事故∶无免赔，100%赔付。
                </div>
                <div v-else>
                  含一年新机完工责任。全年累计限额100万其中每人每次事故赔偿限额50万，每次财产损失限额10万。<br />
                  1、财产损失∶每次事故500元或损失金额的10%，两者以高者为准。<br />
                  2、人伤事故∶无免赔，100%赔付。
                </div>
              </span>
              <span style="line-height: 25px" v-if="info.id == 1">
                含安装维修现场发生并发现的第三者财产损失及人员伤亡赔偿责任，工单机器损失及特定财产不属于第三者保障范围。<br />
                1、年度累计赔偿限额100万元，每次事故赔偿限额60万元，其中每次人身伤亡赔偿限额50万元，每次财产损失赔偿限额10万元。<br />
                2、每次事故财产损失免赔1000元或损失金额的10%，以高者为准。人身伤亡无免赔。
              </span>
            </div>
          </div>
        </el-card>
        <el-card
          shadow="never"
          class="fanan-card"
          v-if="is_fire"
          style="margin-top: 10px"
        >
          <div class="fanan-card-item" style="width: 100%">
            <div class="fanan-card-item-left">火灾责任险</div>
            <div class="fanan-card-item-right" v-if="info.id != 9">
              <span style="line-height: 25px" v-if="info.id == 4 || info.id == 7">
                1、财产损失∶每次事故1000元或损失金额的10%，两者以高者为准。<br />
                2、人伤事故∶无免赔，100%赔付。
              </span>
              <span style="line-height: 25px" v-else>
                含一年新机完工责任。全年累计限额100万其中每人每次事故赔偿限额50万，每次财产损失限额10万。<br />
                1、财产损失∶每次事故500元或损失金额的10%，两者以高者为准。<br />
                2、人伤事故∶无免赔，100%赔付。
              </span>
            </div>
            <div class="fanan-card-item-right" v-if="info.id == 9">
              <span v-if="info.id == 9">
                扩展承保明细表中列明的地点范围内因火灾或爆炸造成第三者人身伤亡或财产损失时被保险人依法应负的赔偿责任，包括特别标明的房东所有但由被保险人使用或控制下的家具、设备和相关附属品。
              </span>
            </div>
          </div>
        </el-card>
        <el-card
          shadow="never"
          class="fanan-card"
          v-if="is_finished"
          style="margin-top: 10px"
        >
          <div class="fanan-card-item" style="width: 100%">
            <div class="fanan-card-item-left">新机完工责任险</div>
            <div class="fanan-card-item-right">
              <div
                style="text-align: left; flex: 1; line-height: 26px; padding: 0px 10px"
              >
                <div>含新机完工90天内完工责任保障;</div>
                <div>财产损失每次免赔1000元或10%，以高者为准；</div>
                <div>共用第三者费任赔偿限额。</div>
              </div>
            </div>
          </div>
        </el-card>
        <div class="form-btn-box">
          <div
            style="margin-right: 80px; font-size: 18px; font-weight: bold; color: #ed0009"
          >
            保费：￥{{ Number(cost).toFixed(2) }} / 人
          </div>
          <el-button size="small" @click="updateInfoItem(1)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(1)"
            >保存
          </el-button>
        </div>
      </div>

      <div class="form-window">
        <div class="form-window-line"></div>
        <div class="form-window-txt">投保企业</div>
        <div class="form-window-btn">
          <el-button :disabled="user_edit" size="mini" @click="history()" type="text"
            >历史信息
          </el-button>
        </div>
      </div>
      <div class="form-form">
        <el-form
          :disabled="insure.edit"
          label-position="left"
          label-width="140px"
          size="small"
        >
          <el-form-item label="营业执照">
            <div class="form-uplopad-box">
              <upload
                :img_url="insure.license"
                file_name="insure/license"
                @change="upInsure($event, -1)"
              ></upload>
              <div class="form-uplopad-box-txt">示例</div>
              <img
                src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/68f208c8020de6b4c8be8df673136ce%403x.png"
                class="form-uplopad-box-img"
              />
              <div class="form-uplopad-box-no" v-if="insure.edit"></div>
            </div>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input
              placeholder="请输入企业名称"
              @blur="qiyeName()"
              v-model="insure.name"
              class="form-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="统一信用编码">
            <el-input
              placeholder="请输入统一信用编码"
              @blur="qiyeNo()"
              v-model="insure.client"
              class="form-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人">
            <el-input
              placeholder="请输入法人"
              v-model="insure.contact"
              class="form-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input
              placeholder="请输入手机号码"
              v-model="insure.contact_mobile"
              class="form-input"
            >
              <template slot="append">
                <el-checkbox v-model="insure.is_manage">批改权限</el-checkbox></template
              >
            </el-input>
          </el-form-item>
          <div style="color: red; margin-left: 141px; margin-bottom: 13px">
            勾选后，确认您授权给该号码持有人在投保后批改批增人员的相关权限，点击<a
              href="https://meimi.nabx.cn/selectpage/#/"
              >进入批改页面</a
            >。
          </div>
          <el-form-item label="所属省市区">
            <el-cascader
              class="form-input"
              @change="changeAddress"
              :props="propsAddress"
              :options="optionsAddress"
              :placeholder="insure.modelPGR ? insure.modelPGR : '请选择省市区'"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="办公地址">
            <div class="form-address">
              <!--<el-select v-model="insure.province" @change="changeInsureProvince()" class="form-seletc" >
                              <el-option v-for="(item,key) in insure_pro" :key="'insure'+key" :label="item.label" :value="item.label" ></el-option>
                            </el-select>
                            <el-select v-model="insure.city"  @change="changeInsureCity()" class="form-seletc">
                              <el-option v-for="(item,key) in insure_city" :key="'insure'+key" :label="item.label" :value="item.label" ></el-option>
                            </el-select>
                            <el-select v-model="insure.area"  class="form-seletc">
                              <el-option v-for="(item,key) in insure_area" :key="'insure'+key" :label="item.label" :value="item.label" ></el-option>
                            </el-select>-->
              <el-input
                placeholder="请输入办公地址"
                v-model="insure.address"
                class="form-input"
              ></el-input>
            </div>
          </el-form-item>
        </el-form>
        <div class="form-btn-box">
          <el-button size="small" @click="updateInfoItem(2)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(4)"
            >保存
          </el-button>
        </div>
      </div>
      <div class="form-window">
        <div class="form-window-line"></div>
        <div class="form-window-txt">其他共同被保险人</div>
        <div class="form-window-btn">
          <el-button :disabled="user_edit" size="mini" @click="addBei()" type="text"
            >添加其他共同被保险人
          </el-button>
        </div>
      </div>
      <div class="form-form">
        <div v-if="open_arr.length > 0">
          <el-card
            v-for="(item, key) in open_arr"
            :key="'open' + key"
            shadow="never"
            :style="{
              marginTop: key == 0 ? '0' : '10px',
              position: 'relative',
            }"
          >
            <el-form
              :disabled="edit_other"
              label-position="left"
              label-width="140px"
              size="small"
            >
              <el-form-item label="企业名称">
                <el-input
                  placeholder="请输入企业名称"
                  @blur="qiyeName()"
                  v-model="item.name"
                  class="form-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="统一信用编码">
                <el-input
                  placeholder="请输入统一信用编码"
                  @blur="qiyeNo()"
                  v-model="item.client"
                  class="form-input"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button
              icon="el-icon-delete"
              @click="deleteOpenArr(key)"
              class="open-delete"
              size="mini"
              type="danger"
            ></el-button>
            <el-button @click="editOpenArr(key)" class="open-edit" size="mini" type="text"
              >历史记录</el-button
            >
          </el-card>
        </div>
        <div v-else class="open-empty">暂无其他共同被保险企业</div>
        <!--<el-form :disabled="edit_other" label-position="left" label-width="140px" size="small">
                  <el-form-item label="增加其他被保企业" >
                    <el-switch v-model="is_open" active-text="是" inactive-text="否"></el-switch>
                  </el-form-item>
                  <div v-if="is_open">
                    <el-form-item label="企业名称" >
                      <el-input v-model="open_name" type="textarea" placeholder="多家企业用'、'分割" ></el-input>
                    </el-form-item>
                    <el-form-item label="统一信用编码" >
                      <el-input v-model="open_no" type="textarea" placeholder="多家企业的统一信用编码用'、'分割" ></el-input>
                      &lt;!&ndash;<el-input v-model="open_no"  placeholder="请使用其中一家企业的统一信用编码" ></el-input>&ndash;&gt;
                    </el-form-item>
                  </div>
                </el-form>-->
        <div class="form-btn-box" v-if="is_open">
          <el-button size="small" @click="updateInfoItem(6)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(6)"
            >保存
          </el-button>
        </div>
      </div>
      <div class="form-window">
        <div class="form-window-line"></div>
        <div class="form-window-txt">保单生效日期</div>
      </div>
      <div class="form-form">
        <el-form
          :disabled="time_eidt"
          label-position="left"
          label-width="140px"
          size="small"
        >
          <!-- <el-form-item label="当前日期">{{ now_time }}</el-form-item> -->
          <el-form-item label="生效日期">
            <el-date-picker
              @change="selectStartTime()"
              v-model="start_time"
              :picker-options="pickerOptions"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
            <span style="color: #f95d4a; margin-left: 10px">最长可提前3个月投保</span>
          </el-form-item>
          <el-form-item label="失效日期">
            <el-date-picker
              v-model="end_time"
              type="date"
              placeholder="失效日期"
              readonly
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="form-btn-box">
          <el-button size="small" @click="updateInfoItem(3)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(5)"
            >保存
          </el-button>
        </div>
      </div>
      <div class="form-window" v-if="info.id == 9">
        <div class="form-window-line"></div>
        <div class="form-window-txt">充电桩信息</div>
      </div>
      <div class="form-form" v-if="info.id == 9">
        <el-form
          :disabled="invoice.edit"
          label-position="left"
          label-width="140px"
          size="small"
        >
          <el-form-item label="充电桩地址">
            <el-cascader
              class="form-input"
              @change="changecdzAddress"
              :props="propsAddress"
              :options="optionsAddress"
              :placeholder="charge_info.modelPGR ? charge_info.modelPGR : '请选择省市区'"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input
              placeholder="请输入详细地址"
              v-model="charge_info.address"
              class="form-input"
            ></el-input> </el-form-item
          ><el-form-item label="充电桩数量">
            <el-input
              placeholder="请输入充电桩数量"
              :disabled="true"
              v-model="charge_info.num"
              class="form-input"
            ></el-input> </el-form-item
          ><el-form-item label="充电桩面积">
            <el-input
              placeholder="请输入充电桩面积"
              v-model="charge_info.area_num"
              class="form-input"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="form-btn-box">
          <el-button size="small" @click="updateInfoItem(5)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(3)"
            >保存
          </el-button>
        </div>
      </div>
      <div class="form-window" v-if="info.id != 9">
        <div class="form-window-line"></div>
        <div class="form-window-txt">人员</div>
        <div class="form-window-btn">
          <el-button :disabled="user_edit" size="mini" class="com-btn" @click="addUser()"
            >添加被保人
          </el-button>
          <el-button :disabled="user_edit" size="mini" class="com-btn" @click="daoModel()"
            >导入人员清单
          </el-button>
          <a :href="base_url + 'static/人员名单导入模板.xlsx'" style="margin-left: 10px">
            <el-button :disabled="user_edit" size="mini" class="com-btn"
              >下载人员模板
            </el-button>
          </a>
        </div>
      </div>
      <div class="form-form" v-if="info.id != 9">
        <el-table
          size="small"
          border
          :data="user"
          :header-cell-style="{
            'background-color': '#E1EBFE',
            color: '#5180F9',
          }"
        >
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="item">
              <el-input
                :disabled="user_edit"
                placeholder="请输入姓名"
                v-model="item.row.name"
                size="small"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="身份证号">
            <template slot-scope="item">
              <el-input
                :disabled="user_edit"
                @blur="blurIdcard(item.$index)"
                placeholder="请输入身份证号"
                v-model="item.row.id_card"
                size="small"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="保费">
            <span slot-scope="item">￥：{{ fanan ? fananprice(item.row) : 0 }}</span>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="item">
              <el-button
                :disabled="user_edit"
                size="small"
                type="text"
                @click="deleteUser(item.$index)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="form-btn-box">
          <div
            style="margin-right: 80px; font-size: 18px; font-weight: bold; color: #ed0009"
          >
            总保费：￥{{ Number(cost).toFixed(2) * user.length }}
          </div>
          <el-button size="small" @click="updateInfoItem(4)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(2)"
            >保存
          </el-button>
        </div>
      </div>

      <div class="form-window" v-if="info.id == 9">
        <div class="form-window-line"></div>
        <div class="form-window-txt">投保充电桩清单</div>
        <div class="form-window-btn">
          <el-button
            :disabled="stake_edit"
            size="mini"
            class="com-btn"
            @click="addcdzqd()"
            >新增充电桩
          </el-button>
          <el-button
            :disabled="stake_edit"
            size="mini"
            class="com-btn"
            @click="daocdzModel()"
            >导入充电桩清单
          </el-button>
          <a
            :href="base_url + 'static/充电桩清单导入模板.xlsx'"
            style="margin-left: 10px"
          >
            <el-button :disabled="stake_edit" size="mini" class="com-btn"
              >下载充电桩模板
            </el-button>
          </a>
        </div>
      </div>
      <div class="form-form" v-if="info.id == 9">
        <el-table
          size="small"
          border
          :data="stake"
          :header-cell-style="{
            'background-color': '#E1EBFE',
            color: '#5180F9',
          }"
        >
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column label="编号">
            <template slot-scope="item">
              <el-input
                :disabled="stake_edit"
                placeholder="请输入编号"
                v-model="item.row.no"
                size="small"
              ></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column label="价值">
            <template slot-scope="item">
              <el-input
                :disabled="stake_edit"
                placeholder="请输入"
                v-model="item.row.price"
                size="small"
              ></el-input>
            </template>
          </el-table-column> -->

          <el-table-column label="操作" width="100px">
            <template slot-scope="item">
              <el-button
                :disabled="stake_edit"
                size="small"
                type="text"
                @click="deletecdzqd(item.$index)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
          "
        >
          <div style="font-size: 22px; color: #f86768">
            保费合计：¥{{ cdzPrice ? cdzPrice : "0" }}
          </div>
          <div>
            <el-button size="small" @click="updateInfoItem(4)">修改</el-button>
            <el-button size="small" class="com-btn" @click="saveStorage(2)"
              >保存
            </el-button>
          </div>
        </div>
      </div>

      <div class="form-window">
        <div class="form-window-line"></div>
        <div class="form-window-txt">发票信息</div>
      </div>
      <div class="form-form">
        <el-form
          :disabled="invoice.edit"
          label-position="left"
          label-width="140px"
          size="small"
        >
          <el-form-item label="发票类型">
            <el-select v-model="invoice.invoice_type">
              <el-option label="增值税专票" :value="1"></el-option>
              <el-option label="增值税普票" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发票抬头">
            <el-input
              placeholder="请输入发票抬头"
              v-model="invoice.invoice_name"
              class="form-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="纳税人编号">
            <el-input
              placeholder="请输入纳税人编号"
              v-model="invoice.invoice_no"
              class="form-input"
            ></el-input>
          </el-form-item>

          <div v-if="invoice.invoice_type == 1">
            <el-form-item label="注册地址">
              <div class="form-address">
                <!--<el-select
                                  v-model="invoice.invoice_province"
                                  @change="changeInvoceProvince()"
                                  class="form-seletc"
                                >
                                  <el-option
                                    v-for="(item, key) in i_pro"
                                    :key="'insure' + key"
                                    :label="item.label"
                                    :value="item.label"
                                  ></el-option>
                                </el-select>
                                <el-select
                                  v-model="invoice.invoice_city"
                                  @change="changeInvoceCity()"
                                  class="form-seletc"
                                >
                                  <el-option
                                    v-for="(item, key) in i_city"
                                    :key="'insure' + key"
                                    :label="item.label"
                                    :value="item.label"
                                  ></el-option>
                                </el-select>
                                <el-select v-model="invoice.invoice_area" class="form-seletc">
                                  <el-option
                                    v-for="(item, key) in i_area"
                                    :key="'insure' + key"
                                    :label="item.label"
                                    :value="item.label"
                                  ></el-option>
                                </el-select>-->
                <el-input
                  placeholder="请输入详细地址"
                  v-model="invoice.invoice_address"
                  class="form-input"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="注册电话">
              <el-input
                placeholder="请输入注册电话"
                v-model="invoice.invoice_mobile"
                class="form-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input
                placeholder="请输入开户银行"
                v-model="invoice.invoice_bank"
                class="form-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="开户账户">
              <el-input
                placeholder="请输入开户账户"
                v-model="invoice.invoice_bank_no"
                class="form-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="收件人">
              <el-input
                placeholder="请输入收件人"
                v-model="invoice.name"
                class="form-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="收件人手机号">
              <el-input
                placeholder="请输入收件人手机号"
                v-model="invoice.mobile"
                class="form-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="收件地址">
              <div class="form-address">
                <!--<el-select
                                  v-model="invoice.province"
                                  @change="changeInvoceProvinces()"
                                  class="form-seletc"
                                >
                                  <el-option
                                    v-for="(item, key) in i_pros"
                                    :key="'insure' + key"
                                    :label="item.label"
                                    :value="item.label"
                                  ></el-option>
                                </el-select>
                                <el-select
                                  v-model="invoice.city"
                                  @change="changeInvoceCitys()"
                                  class="form-seletc"
                                >
                                  <el-option
                                    v-for="(item, key) in i_citys"
                                    :key="'insure' + key"
                                    :label="item.label"
                                    :value="item.label"
                                  ></el-option>
                                </el-select>
                                <el-select v-model="invoice.area" class="form-seletc">
                                  <el-option
                                    v-for="(item, key) in i_areas"
                                    :key="'insure' + key"
                                    :label="item.label"
                                    :value="item.label"
                                  ></el-option>
                                </el-select>-->
                <el-input
                  placeholder="请输入详细地址"
                  v-model="invoice.address"
                  class="form-input"
                ></el-input>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <div class="form-btn-box">
          <el-button size="small" @click="updateInfoItem(5)">修改</el-button>
          <el-button size="small" class="com-btn" @click="saveStorage(3)"
            >保存
          </el-button>
        </div>
      </div>
      <!-- <div class="form-tab">
        <div class="form-tab-item">投保须知</div>
        <div class="form-tab-item">特别约定</div>
        <div class="form-tab-item">保险条款</div>
        <div class="form-tab-item">客户告知书</div>
        <div class="form-tab-item">投保人声明</div>
      </div> -->
      <!-- <div class="form-rich">
        <div class="form-rich-head">投保须知</div>
        <div class="form-rich-body">
          <div v-html="rich1"></div>
        </div>
      </div>
      <div class="form-rich">
        <div class="form-rich-head">特别约定</div>
        <div class="form-rich-body">
          <div v-html="rich2"></div>
        </div>
      </div> -->
      <!-- <div class="form-rich">
        <div class="form-rich-head">保险条款</div>
        <div class="form-rich-body">
          
          <div
            class="form-rich-tiao"
            v-for="(item, key) in clauseList"
            :key="key"
            @click="toclause(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div> -->
      <!-- <div class="form-rich">
        <div class="form-rich-head">客户告知书</div>
        <div class="form-rich-body">
          <div class="form-rich-tiao" @click="todoc(0)">客户告知书</div>
        </div>
      </div> -->
      <!-- <div class="form-rich">
        <div class="form-rich-head">投保人声明</div>
        <div class="form-rich-warning">
          <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-warning.png"
            class="form-rich-warning-icon" />
          <div class="form-rich-warning-txt">
            为充分保障您的权益，请您仔细阅读后勾选确认
          </div>
        </div>
        <div class="form-rich-body">
          <div class="form-rich-shen">
            <img @click="changeAgree1()" v-if="agree1"
              src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-shen.png" class="form-rich-warning-icon" />
            <div @click="changeAgree1()" class="form-rich-shen-no" v-else></div>
            <div class="form-rich-shen-msg">
              本人已完整阅读并了解以上投保须知及投保险种的保险条款，尤其是对其中免除保险人责任的条款或约定（包括但不限于责任免除、投保人被保险人义务、保险金申请与给付等），本人已充分理解并接受上述内容，同意以此作为订立保险合同的依据
            </div>
          </div>
          <div class="form-rich-shen" style="margin-top: 5px">
            <img @click="changeAgree2()" v-if="agree2"
              src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-shen.png" class="form-rich-warning-icon" />
            <div @click="changeAgree2()" class="form-rich-shen-no" v-else></div>
            <div class="form-rich-shen-msg">
              投保时，投保人已就该产品的保障内容以及保险金额等向被保险人进行了明确说明，并征得其同意
            </div>
          </div>
        </div>
      </div> -->
      <div class="form-submit-btn">
        <el-button size="small" class="com-btn" @click="openDialog()"
          >同意投保
        </el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="dao_model"
      title="导入人员清单"
      width="500px"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-upload
        :on-success="upSuccess"
        class="upload-demo"
        drag
        action="/seller/upload/uploadUser"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
    <el-dialog
      :visible.sync="dao_cdzModel"
      title="导入充电桩清单"
      width="500px"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-upload
        :on-success="upCdzSuccess"
        class="upload-demo"
        drag
        action="/seller/upload/uploadCdz"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
    <el-dialog
      :visible.sync="his_model"
      title="历史信息"
      width="600px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="企业名称">
          <el-input
            v-model="clientName"
            placeholder="请输入企业名称查询"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" size="mini" @click="getHistory()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table size="mini" border :data="his_list">
        <el-table-column type="index" width="60px"></el-table-column>
        <el-table-column label="企业名称" prop="insure.name"></el-table-column>
        <el-table-column label="统一信用编码" prop="insure.client"></el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="item">
            <el-button size="mini" type="text" @click="seletcHis(item.row)"
              >选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :visible.sync="his_dialog"
      title="历史信息"
      width="600px"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="企业名称">
          <el-input
            v-model="clientName"
            placeholder="请输入企业名称查询"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" size="mini" @click="getClient">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table size="mini" border :data="clientList" key="his_dialog">
        <el-table-column type="index" width="60px"></el-table-column>
        <el-table-column label="企业名称" prop="name"></el-table-column>
        <el-table-column label="统一信用编码" prop="client"></el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="item">
            <el-button size="mini" type="text" @click="seletcHisArr(item.row)"
              >选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <div id="divplay"></div>
    <div>
      <!-- 投保须知弹窗 -->
      <el-dialog :visible.sync="dialogVisible" show-close class="xz">
        <template #title>
          <div
            style="
              width: 100%;
              height: 50px;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #f5f5f5;
            "
          >
            <div class="text-[16px]" style="font-size: 16px">投保须知</div>
            <div
              @click="router.push('/index/home')"
              style="
                width: 12px;
                height: 12px;
                position: absolute;
                top: 16px;
                right: 30px;
                cursor: pointer;
              "
              class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
            >
              <!-- <el-image
                :src="getAssetsFile('home/close.png')"
                class="w-full h-full"
              ></el-image> -->
            </div>
          </div>
        </template>
        <div style="padding: 0 20px">
          <div>
            <div style="font-weight: bold; font-size: 20px; margin-bottom: 20px">
              投保须知
            </div>
            <div class="p-[30px]" v-html="tkInfo.notice ? tkInfo.notice : ''"></div>
          </div>
          <div>
            <div
              style="
                font-weight: bold;
                font-size: 20px;
                margin-bottom: 20px;
                margin-top: 20px;
              "
            >
              客户通知书
            </div>
            <div class="p-[30px]" v-html="tkInfo.inform ? tkInfo.inform : ''"></div>
          </div>
          <div>
            <div
              style="
                font-weight: bold;
                font-size: 20px;
                margin-bottom: 20px;
                margin-top: 20px;
              "
            >
              特别约定
            </div>
            <div
              class="p-[30px]"
              v-html="tkInfo.contributing ? tkInfo.contributing : ''"
            ></div>
          </div>

          <div>
            <div
              style="
                font-weight: bold;
                margin-top: 20px;
                font-size: 20px;
                margin-bottom: 20px;
              "
            >
              保险条款
            </div>
            <div
              class="form-rich-tiao"
              v-for="(item, key) in tkInfo.list"
              :key="key"
              @click="toclause(item.id)"
            >
              {{ item.title }}
            </div>
          </div>
          <!-- <div>
            <div style="
                font-weight: bold;
                margin-top: 20px;
                font-size: 20px;
                margin-bottom: 20px;

              ">
              投保人声明
            </div>
            <div>
              1.本人已完整阅读并了解以上投保须知及投保险种的保险条款，尤其是对其中免除保险人责任的条款或约定（包括但不限于责任免除、投保人被保险人义务、保险金申请与给付等），本人已充分理解并接受上述内容，同意以此作为订立保险合同的依据
            </div>
            <div>
              2.
              投保时，投保人已就该产品的保障内容以及保险金额等向被保险人进行了明确说明，并征得其同意
            </div>
          </div> -->
          <div class="form-rich">
            <div class="form-rich-head">投保人声明</div>
            <div class="form-rich-warning">
              <img
                src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-warning.png"
                class="form-rich-warning-icon"
              />
              <div class="form-rich-warning-txt">
                为充分保障您的权益，请您仔细阅读后勾选确认
              </div>
            </div>
            <div class="form-rich-body">
              <div class="form-rich-shen">
                <img
                  @click="changeAgree1()"
                  v-if="agree1"
                  src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-shen.png"
                  class="form-rich-warning-icon"
                />
                <div @click="changeAgree1()" class="form-rich-shen-no" v-else></div>
                <div class="form-rich-shen-msg">
                  本人已完整阅读并了解以上投保须知及投保险种的保险条款，尤其是对其中免除保险人责任的条款或约定（包括但不限于责任免除、投保人被保险人义务、保险金申请与给付等），本人已充分理解并接受上述内容，同意以此作为订立保险合同的依据
                </div>
              </div>
              <div class="form-rich-shen" style="margin-top: 5px">
                <img
                  @click="changeAgree2()"
                  v-if="agree2"
                  src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-shen.png"
                  class="form-rich-warning-icon"
                />
                <div @click="changeAgree2()" class="form-rich-shen-no" v-else></div>
                <div class="form-rich-shen-msg">
                  投保时，投保人已就该产品的保障内容以及保险金额等向被保险人进行了明确说明，并征得其同意
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            style="
              width: 100%;
              height: 130px;
              box-shadow: 0px -3px 8px 0px rgba(209, 209, 209, 0.25);
              border-radius: 0px 0px 10px 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              margin-top: 30px;
            "
          >
            <!-- <div class="form-rich-shen" style="margin-bottom: 30px; margin-top: 30px">
              <img @click="agree3 = !agree3" v-if="agree3"
                src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/form-shen.png"
                class="form-rich-warning-icon" />
              <div @click="agree3 = !agree3" class="form-rich-shen-no" v-else></div>
              <div class="form-rich-shen-msg">
                已阅读并已详尽知晓上述内容<span v-if="dialogTime">（{{ dialogTime }}s）</span>
              </div>
            </div> -->
            <div class="mt-[30px]">
              <el-button
                @click="submit"
                :dark="true"
                class="w-[240px]"
                size="large"
                :disabled="dialogTime ? true : false"
                ><span class="text-white">我已全部阅读</span>
                <span v-if="dialogTime">{{ dialogTime }}</span>
              </el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import step from "../../components/step/step.vue";
import province from "../../assets/js/province";
import city from "../../assets/js/city";
import area from "../../assets/js/area";
import upload from "../../components/upload/sm-upload.vue";

import * as rrweb from "rrweb";
// import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";

var arrList = [];
export default {
  components: { step, upload },
  data() {
    return {
      cost: "", //保费
      agree3: false,
      dialogTime: 10,
      dialogVisible: false,
      tkInfo: {},
      Third: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
          // return time.getTime() < 1683276108000;
        },
      },
      info: {
        is_show: 0,
      },
      id: 0,
      fanan: "",
      level: "",
      edit: false,
      is_third: 0,
      is_fire: 0,
      is_open: true,
      open_name: "",
      open_no: "",
      open_arr: [],
      insure: {
        edit: false,
        name: "",
        client: "",
        province: "",
        city: "",
        area: "",
        // 回显地址拼写
        modelPGR: "",
        address: "",
        contact: "",
        contact_mobile: "",
        is_manage: true,
        license: "",
      },
      invoice: {
        edit: false,
        invoice_type: 2,
        invoice_name: "",
        invoice_no: "",
        invoice_mobile: "",
        invoice_bank: "",
        invoice_bank_no: "",
        invoice_province: "",
        invoice_city: "",
        invoice_area: "",
        invoice_address: "",
        name: "",
        mobile: "",
        province: "",
        city: "",
        area: "",
        address: "",
      },
      user: [],
      stake: [],
      user_edit: false,
      stake_edit: false,
      edit_other: false,
      pro_index: 0,
      city_index: 0,
      area_index: 0,
      insure_pro: [],
      insure_city: [],
      insure_area: [],
      now_time: "",
      start_time: "",
      end_time: "",
      i_p_index: 0,
      i_c_index: 0,
      i_a_index: 0,
      i_pro: [],
      i_city: [],
      i_area: [],
      i_ps_index: 0,
      i_cs_index: 0,
      i_as_index: 0,
      i_pros: [],
      i_citys: [],
      i_areas: [],
      rich1: "",
      rich2: "",
      agree1: false,
      agree2: false,
      time_eidt: false,
      order_id: 0,
      is_add: false,
      dao_model: false,
      dao_cdzModel: false,
      his_list: [],
      his_model: false,
      his_dialog: false,
      clauseList: [],
      loading: false,
      is_four: 0,
      is_finished: false,
      clientList: [],
      key: 0,
      clientName: "",
      chooseDta: {},
      propsAddress: {
        emitPath: true,
        lazy: true,
        value: "label",
        lazyLoad: (node, resolve) => {
          if (node.level == 0) {
            this.getAddress();
          }
          if (node.level == 1) {
            this.getCity(node, resolve);
          } else if (node.level == 2) {
            node.level = 2;
            this.getArea(node, resolve);
          }
        },
      },
      optionsAddress: [],
      stopFun: () => {},
      cdzPrice: "",
      charge_info: {
        edit: false,
        name: "",
        client: "",
        province: "",
        city: "",
        area: "",
        // 回显地址拼写
        modelPGR: "",
        address: "",
        contact: "",
        contact_mobile: "",
        is_manage: true,
        license: "",
        area_num: "",
        num: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.id = this.$route.params.id;
    this.order_id = this.$route.query.order_id;
    if (this.$route.query.is_add) {
      this.is_add = true;
    }
    this.getData();
    this.insureAddr();
    this.invoceIAddr();
    this.invoceIAddrs();
    this.getNowTime();
    this.getRich1();
    // this.getRich2();
    this.getHistory();
    // this.getClause();
    this.getClient();
    setInterval(() => {
      this.getNowTime();
    }, 1000);

    this.player();
  },

  beforeRouteLeave(to, from, next) {
    this.stopFun();
    arrList = [];
    next();
  },
  methods: {
    //打卡弹窗
    openDialog() {
      // this.getTanChuan();

      if (!this.fanan) return this.toast(0, "请选择方案");
      if (!this.insure.name) return this.toast(0, "请输入企业名称");
      if (!this.insure.client) return this.toast(0, "请输入统一信用编码");
      if (!this.insure.contact) return this.toast(0, "请输入法人");
      if (!this.insure.contact_mobile) return this.toast(0, "请输入法人手机号");

      if (this.insure.contact_mobile.length != 11)
        return this.toast(0, "请输入正确的法人手机号");
      if (!this.insure.license) return this.toast(0, "请上传营业执照");
      if (!this.insure.address) return this.toast(0, "请完善地址");
      if (!this.start_time) return this.toast(0, "请选择生效时间");

      if (this.info.id != 9) {
        if (this.user.length == 0) return this.toast(0, "请添加被保人员");
      }
      if (this.info.id == 9) {
        if (this.stake.length == 0) return this.toast(0, "请添加充电桩清单");
      }
      for (var i in this.user) {
        if (!this.user[i].name) return this.toast(0, "请输入被保人员姓名");
        if (!this.user[i].id_card) return this.toast(0, "请输入被保人员身份证");
      }
      if (this.info.id == 9) {
        for (var j in this.stake) {
          if (!this.stake[j].no) return this.toast(0, "请输入清单编号");
          // if (!this.stake[j].price) return this.toast(0, "请输入清单价值");
        }
      }
      if (!this.invoice.invoice_name) return this.toast(0, "请输入发票抬头");
      if (!this.invoice.invoice_no) return this.toast(0, "请输入纳税人编号");
      if (this.invoice.invoice_type == 1) {
        if (!this.invoice.invoice_mobile) return this.toast(0, "请输入注册电话");
        if (!this.invoice.invoice_bank) return this.toast(0, "请输入开户银行");
        if (!this.invoice.invoice_bank_no) return this.toast(0, "请输入开户账户");
        if (!this.invoice.name) return this.toast(0, "请输入收件人");
        if (!this.invoice.mobile) return this.toast(0, "请输入收件人手机号");
        if (!this.invoice.address) return this.toast(0, "请完善地址");
        /*if (
                  !this.invoice.address ||
                  !this.invoice.province ||
                  !this.invoice.city ||
                  !this.invoice.area
                )
                  return this.toast(0, "请完善地址");*/
      }
      /*if(this.is_open && !this.open_name)return this.toast(0,'请输入被保企业名称');
            if(this.is_open && !this.open_no)return this.toast(0,'请输入被保企业统一信用编码');*/
      /*if(this.is_open) {
              var open_name_arr = this.open_name.split('、');
              var open_no_arr = this.open_no.split('、');
              if(open_name_arr.length != open_no_arr.length)return this.toast(0,'请完善被保企业名称或统一信用编码');
            }*/
      for (var x in this.open_arr) {
        if (!this.open_arr[x].name) return this.toast(0, "请输入企业名称");
        if (!this.open_arr[x].client) return this.toast(0, "请输入统一信用编码");
      }
      this.getTanChuan();
    },
    //倒计时
    countDown() {
      let t = setInterval(() => {
        if (this.dialogTime <= 0) {
          clearInterval(t);
          return;
        }
        this.dialogTime--;
      }, 1000);
    },
    //获取投保须知弹窗数据
    getTanChuan() {
      this.ajaxs("index/getInsureContent", {
        data: {
          id: this.id,
          third: this.Third,
          finished: this.is_finished,
          is_fire: this.is_fire,
        },
        success: (res) => {
          if (res.code == 1) {
            this.tkInfo = res.msg;
            this.dialogVisible = true;
            this.countDown();
          }
          //console.log(res);
        },
      });
    },
    //录制视频
    player() {
      console.log(arrList);
      this.stopFun = rrweb.record({
        emit(event) {
          arrList.push(event);
        },
      });
    },
    // bf() {
    //   this.stopFun();
    //   console.log(JSON.stringify(arrList));
    //   new rrwebPlayer({
    //     target: document.getElementById("divplay"),
    //     props: { events: arrList },
    //   });
    // },
    getAddress() {
      this.ajaxs("index/getProvince", {
        data: {},
        success: (res) => {
          this.optionsAddress = res.msg;
        },
      });
    },
    getCity(node, resolve) {
      console.log(node);
      this.ajaxs("index/getCity", {
        data: {
          code: node.data.value,
        },
        success: (res) => {
          let optionChild = res.msg;
          optionChild.map((item) => {
            return {
              value: item.value,
              label: item.label,
            };
          });
          console.log(optionChild);
          resolve(optionChild);
        },
      });
    },
    getArea(node, resolve) {
      console.log(node);
      let data = {
        code: node.data.value,
      };
      this.ajaxs("index/getArea", {
        data: data,
        success: (res) => {
          let optionChilds = res.msg;
          optionChilds.map((item) => {
            item.leaf = true; // 这里是区分最后一级时不让显示箭头
            return {
              value: item.value,
              label: item.label,
              children: [],
            };
          });
          resolve(optionChilds);
        },
      });
    },

    changeAddress(e) {
      this.insure.province = e[0];
      this.insure.city = e[1];
      this.insure.area = e[2];
      this.insure.modelPGR = e[0] + "/" + e[1] + "/" + e[2];
    },
    changecdzAddress(e) {
      this.charge_info.province = e[0];
      this.charge_info.city = e[1];
      this.charge_info.area = e[2];
      this.charge_info.modelPGR = e[0] + "/" + e[1] + "/" + e[2];
    },
    editOpenArr(key) {
      this.key = key;
      this.his_dialog = true;
      this.clientName = "";
    },
    deleteOpenArr(index) {
      this.open_arr.splice(index, 1);
    },
    addBei() {
      this.open_arr.push({
        name: "",
        client: "",
        address: "",
        contact: "",
        contact_mobile: "",
        license: "",
      });
    },
    fananprice(data) {
      // console.log(this.info.fanan[this.fanan].price);
      console.log(data);
      this.$forceUpdate();
      if (!this.fanan) return 0;
      var price = this.chooseDta.fanan[this.fanan].price;
      if (this.is_third) price += this.info.third.price;
      if (this.is_finished) price += this.info.finished.price;
      // this.cost = price;
      //  console.log(this.info.fire[this.fanan].price)
      if (this.info.id == 9) {
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
      }

      return price;
    },
    seletcHis(data) {
      this.his_model = false;
      this.invoice = JSON.parse(JSON.stringify(data.invoice));
      this.insure = JSON.parse(JSON.stringify(data.insure));
      this.insureAddr();
      this.invoceIAddr();
      this.invoceIAddrs();
    },
    seletcHisArr(data) {
      this.his_dialog = false;
      this.open_arr[this.key] = data;
    },
    getHistory() {
      this.ajaxs("home/getClient", {
        data: { name: this.clientName },
        success: (res) => {
          this.his_list = res.msg;
        },
      });
    },
    // getClause() {
    //   this.ajaxs("index/getClauseList", {
    //     data: { id: this.id },
    //     success: (res) => {
    //       this.clauseList = res.msg;
    //     },
    //   });
    // },
    getClient() {
      this.ajaxs("index/getClientList", {
        data: { name: this.clientName },
        success: (res) => {
          this.clientList = res.msg;
        },
      });
    },
    history() {
      this.his_model = true;
      this.clientName = "";
    },
    upSuccess(e) {
      if (e.code == 0) {
        this.toast(0, e.msg);
        this.dao_model = false;
        return;
      }
      // this.user = this.user.concat(e.msg);
      for (var x in e.msg) {
        var allow = true;
        for (var i in this.user) {
          if (e.msg[x].id_card == this.user[i].id_card) allow = false;
        }
        if (allow == true) this.user.push(e.msg[x]);
      }

      this.dao_model = false;
    },
    upCdzSuccess(e) {
      if (e.code == 0) {
        this.toast(0, e.msg);
        this.dao_cdzmodel = false;
        return;
      }
      // this.user = this.user.concat(e.msg);
      for (var x in e.msg) {
        var allow = true;
        for (var i in this.stake) {
          if (e.msg[x].no == this.stake[i].no) allow = false;
        }
        if (allow == true) this.stake.push(e.msg[x]);
      }
      if (this.info.id == 9) {
        this.charge_info.num = this.stake.length;
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
      }

      this.dao_cdzModel = false;
    },
    daoModel() {
      this.dao_model = true;
    },
    daocdzModel() {
      this.dao_cdzModel = true;
    },
    todoc(type) {
      let routeData = this.$router.resolve({
        path: "/index/index/doc/" + type,
      });
      window.open(routeData.href, "_blank");
    },
    toclause(id) {
      let routeData = this.$router.resolve({
        path: "/index/index/clause/" + id,
      });
      window.open(routeData.href, "_blank");
    },
    blurIdcard(index) {
      if (this.user[index].id_card.length != 18) {
        this.user[index].id_card = "";
        return this.toast(0, "请输入正确的身份证号码");
      }
      for (var i in this.user) {
        if (i != index && this.user[i].id_card == this.user[index].id_card) {
          this.user[index].id_card = "";
          return this.toast(0, "被保人已存在");
        }
      }
    },
    qiyeName() {
      this.invoice.invoice_name = this.insure.name;
    },
    qiyeNo() {
      this.invoice.invoice_no = this.insure.client;
    },
    //提交保存
    submit() {
      // if (!this.agree3) {
      //   return this.toast(0, "请选阅读投保须知");
      // }
      if (!this.agree1 || !this.agree2) return this.toast(0, "请先全部阅读并同意投保");
      var data = this.createData();
      if (this.order_id && !this.is_add) data.id = this.order_id;
      this.loading = true;
      this.stopFun();
      this.ajaxs("home/addOrder", {
        data: data,
        success: (res) => {
          this.loading = false;
          if (res.code) {
            this.toast(1, "提交成功");
            this.$router.push({
              path: "/index/index/confirm/" + res.msg,
            });
          } else {
            this.toast(res.code, res.msg);
          }
        },
      });
    },
    //修改信息
    updateInfoItem(type) {
      switch (type) {
        case 1:
          this.edit = false;
          break;
        case 2:
          this.insure.edit = false;
          this.user_edit = false;
          break;
        case 3:
          this.time_eidt = false;
          break;
        case 4:
          this.user_edit = false;
          break;
        case 5:
          this.invoice.edit = false;
          break;
        case 6:
          this.edit_other = false;
          break;
      }
    },
    //获取缓存数据
    getStorage() {
      this.ajaxs("home/getSave", {
        data: {
          bx_id: this.id,
        },
        success: (res) => {
          if (res.msg != false) {
            this.$confirm("发现未完成的订单，是否继续填写?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.toFormData(res.msg);
              })
              .catch(() => {});
          }
        },
      });
    },
    //填充表单数据
    toFormData(data) {
      this.fanan = data.fanan;
      this.level = data.level;
      this.start_time = data.start_time;
      this.end_time = data.end_time;
      this.insure = data.insure;
      this.invoice = data.invoice;
      this.user = data.user;
      this.stake = data.stake;
      this.edit = data.edit;
      this.user_edit = data.user_edit;
      this.time_eidt = data.time_eidt;
      this.is_third = data.is_third;
      this.Third = data.is_third === 1 && this.info.is_third == 1 ? true : false;
      this.is_finished = data.is_finished;
      this.is_four = data.is_finished ? 1 : 0;
      this.is_open = data.is_open;
      this.open_name = data.open_name;
      this.open_no = data.open_no;
      this.open_arr = data.open_arr ? data.open_arr : [];
      this.charge_info = data.charge_info;
      this.insureAddr();
      this.invoceIAddr();
      this.invoceIAddrs();
      if (this.level) {
        this.selectDjFanan(this.level);
      }
      if (this.info.id == 9) {
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
      }
      if (this.fanan) {
        var finished_price = this.is_finished ? this.info.finished.price : 0;
        var third_price = this.Third ? this.info.third.price : 0;
        this.cost =
          Number(this.chooseDta.fanan[this.fanan].price) +
          Number(finished_price) +
          Number(third_price);
      } else {
        this.cost = 0;
      }
    },
    //保存缓存数据
    saveStorage(type) {
      if (type == 0) {
        this.edit = true;
        this.user_edit = true;
        this.invoice.edit = true;
        this.insure.edit = true;
      }
      if (type == 1) {
        this.edit = true;
      }
      if (type == 2) {
        this.user_edit = true;
      }
      if (type == 3) {
        this.invoice.edit = true;
      }
      if (type == 4) {
        this.insure.edit = true;
      }
      if (type == 5) {
        this.time_eidt = true;
      }
      if (type == 6) {
        this.edit_other = true;
      }
      this.ajaxs("home/saveOrder", {
        data: this.createData(),
        success: (res) => {
          this.toast(res.code, res.msg);
          this.$forceUpdate();
        },
      });
    },
    //组装数据
    createData() {
      console.log(this.insure)
      var data = {
        bx_id: this.id,
        fanan: this.fanan,
        is_open: this.is_open,
        open_no: this.open_no,
        open_name: this.open_name,
        start_time: this.start_time,
        end_time: this.end_time,
        insure: this.insure,
        invoice: this.invoice,
        is_fire: this.is_fire,
        user: this.user,
        stake: this.stake,
        charge_info: this.charge_info,
        edit: this.edit,
        user_edit: this.user_edit,
        time_eidt: this.time_eidt,
        is_third: this.is_third,
        open_arr: this.open_arr,
        is_finished: this.is_finished,
        level: this.level,
        mark: arrList,
      };
      return data;
    },
    changeAgree1() {
      this.agree1 = !this.agree1;
    },
    changeAgree2() {
      this.agree2 = !this.agree2;
    },
    getRich1() {
      this.ajaxs("index/getApplyTpDoc", {
        data: {
          id: this.id,
          is_third: this.is_third,
          is_finished: this.is_four,
          is_fire: this.is_fire,
        },
        success: (res) => {
          this.rich1 = res.msg.notice;
          this.rich2 = res.msg.contributing;
          this.clauseList = res.msg.list;
        },
      });
    },
    // getRich2() {
    //   var type = 3;
    //   if (this.is_third && this.id == 1) type = 3;
    //   if (this.is_third == 0 && this.id == 1) type = 9;
    //   if (this.is_finished && this.id == 2) type = 10;
    //   if (this.is_finished == 0 && this.id == 2) type = 11;
    //   if (this.is_third && this.id == 4) type = 13;
    //   if (this.is_third == 0 && this.id == 4) type = 14;
    //   // console.log('===状态==='+type,this.id,this.is_third);
    //   // this.ajaxs("index/getText", {
    //   //   data: {
    //   //     type: type,
    //   //   },
    //   //   success: (res) => {
    //   //     this.rich2 = res.msg;
    //   //   },
    //   // });
    // },
    //删除投保人
    deleteUser(index) {
      this.user.splice(index, 1);
    },
    //删除充电桩清单
    deletecdzqd(index) {
      this.stake.splice(index, 1);
      if (this.info.id == 9) {
        this.charge_info.num = this.stake.length;
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
      }
    },
    //添加投保人
    addUser() {
      // if(this.id==2&&this.is_finished){
      //
      // }else{
      //
      // }
      this.user.push({
        name: "",
        id_card: "",
      });
    },
    //添加充电桩清单
    addcdzqd() {
      let param = {
        no: "",
        price: "",
      };
      this.stake.push(param);
      console.log(this.stake);
      this.charge_info.num = this.stake.length;
      if (this.info.id == 9) {
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
      }
    },
    //选择开始时间
    selectStartTime() {
      var d2 = new Date(this.start_time);
      d2.setFullYear(d2.getFullYear() + 1);
      // d2.setDate(d2.getDate()-1);
      var year = d2.getFullYear();
      var month = d2.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var day = d2.getDate();
      day = day < 10 ? "0" + day : day;
      var date = year + "-" + month + "-" + day;
      this.end_time = date + " 00:00:00";
    },
    getTargetTime(t) {
      var d = t.split(" ")[0],
        h = t.split(" ")[1],
        date = new Date();

      date.setYear(d.split("-")[0]);
      date.setMonth(d.split("-")[1] - 1);
      date.setDate(d.split("-")[2]);

      date.setHours(h.split(":")[0]);
      date.setMinutes(h.split(":")[1]);
      date.setSeconds(h.split(":")[2]);

      return date.getTime();
    },
    //获取时间
    getNowTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month > 10 ? month : "0" + month;
      var day = date.getDate();
      day = day > 10 ? day : "0" + day;
      var hour = date.getHours();
      hour = hour > 10 ? hour : "0" + hour;
      var minutes = date.getMinutes();
      minutes = minutes > 10 ? minutes : "0" + minutes;
      var second = date.getSeconds();
      second = second > 10 ? second : "0" + second;
      this.now_time =
        year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + second;
    },
    //上传图片
    upInsure(e, index) {
      if (index == -1) {
        this.insure.license = e;
      } else {
        this.open_arr[index].license = e;
      }
      this.ajaxs("home/getFace", {
        data: {
          url: e,
        },
        success: (res) => {
          if (index == -1) {
            this.insure.name = res.msg.name;
            this.insure.address = res.msg.address;
            this.insure.client = res.msg.client;
            this.insure.contact = res.msg.legal_person;
            this.invoice.invoice_name = res.msg.name;
            this.invoice.invoice_no = res.msg.client;
          } else {
            this.open_arr[index].name = res.msg.name;
            this.open_arr[index].address = res.msg.address;
            this.open_arr[index].client = res.msg.client;
            this.open_arr[index].contact = res.msg.legal_person;
            this.$forceUpdate();
          }
          console.log(res);
        },
      });
    },
    changeInsureProvince() {
      this.city_index = 0;
      this.area_index = 0;
      this.insure.city = "";
      this.insure.area = "";
      this.insureAddr();
    },
    changeInvoceProvince() {
      this.i_c_index = 0;
      this.i_a_index = 0;
      this.invoice.invoice_city = "";
      this.invoice.invoice_area = "";
      this.invoceIAddr();
    },
    changeInvoceProvinces() {
      this.i_cs_index = 0;
      this.i_as_index = 0;
      this.invoice.city = "";
      this.invoice.area = "";
      this.invoceIAddrs();
    },
    changeInsureCity() {
      this.area_index = 0;
      this.insure.area = "";
      this.insureAddr();
    },
    changeInvoceCitys() {
      this.i_as_index = 0;
      this.invoice.area = "";
      this.invoceIAddrs();
    },
    changeInvoceCity() {
      this.i_a_index = 0;
      this.invoice.invoice_area = "";
      this.invoceIAddr();
    },
    invoceIAddr() {
      this.i_pro = province;
      for (var i in this.i_pro) {
        if (this.i_pro[i].label == this.invoice.invoice_province) {
          this.i_p_index = i;
        }
      }
      this.i_city = city[this.i_p_index];
      for (var x in this.i_city) {
        if (this.i_city[x].label == this.invoice.invoice_city) {
          this.i_c_index = x;
        }
      }
      this.i_area = area[this.i_p_index][this.i_c_index];
      for (var y in this.i_area) {
        if (this.i_area[y].label == this.invoice.invoice_area) {
          this.i_a_index = y;
        }
      }
    },
    invoceIAddrs() {
      this.i_pros = province;
      for (var i in this.i_pros) {
        if (this.i_pros[i].label == this.invoice.province) {
          this.i_ps_index = i;
        }
      }
      this.i_citys = city[this.i_ps_index];
      for (var x in this.i_citys) {
        if (this.i_citys[x].label == this.invoice.city) {
          this.i_cs_index = x;
        }
      }
      this.i_areas = area[this.i_ps_index][this.i_cs_index];
      for (var y in this.i_areas) {
        if (this.i_areas[y].label == this.invoice.area) {
          this.i_as_index = y;
        }
      }
    },
    //初始化地址
    insureAddr() {
      this.insure_pro = province;
      for (var i in this.insure_pro) {
        if (this.insure_pro[i].label == this.insure.province) {
          this.pro_index = i;
        }
      }
      this.insure_city = city[this.pro_index];
      for (var x in this.insure_city) {
        if (this.insure_city[x].label == this.insure.city) {
          this.city_index = x;
        }
      }
      this.insure_area = area[this.pro_index][this.city_index];
      for (var y in this.insure_area) {
        if (this.insure_area[y].label == this.insure.area) {
          this.area_index = y;
        }
      }
    },
    //第三者责任险
    selectIsThird(index) {
      if (index == 0) {
        this.Third = false;
        //三者和新机完工责任险绑定
        this.selectIsF(0);
      } else {
        if (this.info.is_third) {
          this.Third = true;
        } else {
          this.Third = false;
        }
      }
      this.is_third = index;
      this.getRich1();

      if (this.fanan) {
        var finished_price = this.is_finished ? this.info.finished.price : 0;
        var third_price = this.Third ? this.info.third.price : 0;
        this.cost =
          Number(this.chooseDta.fanan[this.fanan].price) +
          Number(finished_price) +
          Number(third_price);
      } else {
        this.cost = 0;
      }
      // this.getRich2();
    },
    //扩展火灾爆炸责任险
    selectIsFire(index) {
      this.is_fire = index;

      if (this.info.id == 9) {
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
        console.log(this.info.fire[this.fanan].price);
      }

      this.getRich1();
    },
    //新机完工责任险
    selectIsF(index) {
      if (index == 0) {
        this.is_finished = false;
      } else {
        this.is_finished = true;
      }
      this.is_four = index;
      this.getRich1();
      if (this.fanan) {
        var finished_price = this.is_finished ? this.info.finished.price : 0;
        var third_price = this.Third ? this.info.third.price : 0;
        this.cost =
          Number(this.chooseDta.fanan[this.fanan].price) +
          Number(finished_price) +
          Number(third_price);
      } else {
        this.cost = 0;
      }
      // this.getRich2();
    },
    //选择方案
    selectFanan(index) {
      this.fanan = index;
      var finished_price = this.is_finished ? this.info.finished.price : 0;
      var third_price = this.Third ? this.info.third.price : 0;
      this.cost =
        Number(this.chooseDta.fanan[this.fanan].price) +
        Number(finished_price) +
        Number(third_price);
      if (this.info.id == 9) {
        this.cdzPrice =
          (this.info.fanan[this.fanan].price + this.info.fire[this.fanan].price) *
          this.stake.length;
        this.countCost(
          this.info.fanan[this.fanan].price,
          this.info.fire[this.fanan].price,
          this.stake.length,
          this.is_fire
        );
      }

      //console.log();
      this.$forceUpdate();
    },
    countCost(fananP, fireP, num, flag) {
      this.cdzPrice = (fananP + (flag ? fireP : 0)) * num;
      this.cost = fananP + (flag ? fireP : 0);
      console.log(this.cost);
    },
    selectDjFanan(itemN, index, logo) {
      this.level = itemN;
      if (logo) {
        this.fanan = "";
        this.chooseDta = this.info[this.info.select_list[index].value];
      } else {
        let findName = "";
        this.info.select_list.forEach((item) => {
          if (item.name === itemN) {
            return (findName = item.value);
          }
        });
        this.chooseDta = this.info[findName];
      }
      this.$forceUpdate();
    },
    getOrder() {
      this.ajaxs("Home/getPayOrder", {
        data: {
          id: this.order_id,
        },
        success: (res) => {
          if (res.msg.mark != undefined) {
            arrList = res.msg.mark;
          }

          this.fanan = res.msg.fanan;
          this.is_third = res.msg.is_third ? true : false;
          this.is_four = res.msg.is_finished ? true : false;
          this.edit = false;

          this.insure = res.msg.insure;

          this.insure.edit = false;
          this.start_time = res.msg.start_time;
          if (this.info.id == 9) {
            this.charge_info = res.msg.charge_info;
            this.charge_info.modelPGR =
              res.msg.charge_info.province +
              "/" +
              res.msg.charge_info.city +
              "/" +
              res.msg.charge_info.area;
          }
          this.insure.modelPGR =
            res.msg.insure.province +
            "/" +
            res.msg.insure.city +
            "/" +
            res.msg.insure.area;
          this.stake = res.msg.stake;
          this.user_edit = false;
          this.is_fire = res.msg.is_fire;
          this.end_time = res.msg.end_time;
          this.time_eidt = false;
          this.user = res.msg.user;
          this.user_edit = false;
          this.invoice = res.msg.invoice;
          this.invoice.edit = false;
          this.is_open = res.msg.is_open;
          this.open_arr = res.msg.open_arr ? res.msg.open_arr : [];
          this.level = res.msg.level;
          this.insureAddr();
          this.invoceIAddr();
          this.invoceIAddrs();
          if (this.level) {
            this.selectDjFanan(this.level);
          }
          if (this.info.id == 9) {
            this.countCost(
              this.info.fanan[this.fanan].price,
              this.info.fire[this.fanan].price,
              this.stake.length,
              this.is_fire
            );
          }
        },
      });
    },
    getData() {
      this.ajaxs("index/detail", {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.info = res.msg;
          //三者

          //默认选中 投保
          if (this.info.third_true) {
            this.selectIsThird(1);
          }
          //完工责任
          if (this.info.finished_true) {
            this.selectIsF(1);
          }

          if (this.info.select_list.length == 0) {
            this.chooseDta.fanan = this.info.fanan;
            this.chooseDta.fananlist = this.info.fananlist;
          } else {
            this.level = this.info.select_list[0].name;
            this.chooseDta = this.info[this.info.select_list[0].value];
          }
          if (this.order_id) this.getOrder();
          else this.getStorage();
        },
      });
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/form.css";

.xz /deep/ .el-dialog__header {
  padding: 0;
}

.xz /deep/ .el-dialog__body {
  padding: 30px 0;
}
</style>
